<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://www.helloweba.net/js/jquery.js"></script>
    <script src="./layer-v3.1.1/layer/layer.js"></script>
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/chat.css">
</head>
<body>
	<div>
		<div id="chat-wrap">
			<div id="result">某某上线了...</div>
			<ul class="chat-thread">
				<!--
				<li class="you"><img class="head" src="images/head1.jpg" alt=""><p>Are we meeting today?</p></li>
				<li class="you"><img class="head" src="images/head1.jpg" alt=""><p>yes</p></li>
				<li class="me"><img class="head" src="images/head1.jpg" alt=""><p>一部分保持在行尾，另一部分换到下一行。</p></li>
				<li class="you"><img class="head" src="images/head1.jpg" alt=""><p>yes</p></li>
				<li class="you"><img class="head" src="images/head1.jpg" alt=""><p>yes</p></li>
				-->
			</ul>
			
		</div>
		<div class="send">
			
			  <input type="text" class="form-control" id="message" autocomplete="off" placeholder="请输入内容">
			  <button type="submit" class="btn btn-info" id="sub">发送</button>
			
		</div>
	</div>
    <hr>
    <script>
        $(function(){
			var wsServer = 'ws://192.168.196.140:9502'; // 定义websockt服务器的地址
			var websocket = new WebSocket(wsServer);
			
			// 客户端连接上服务器
			websocket.onopen = function (evt) {
				$('#result').html("<?=$_SESSION['name']?>上线了....").slideUp(3000);
				
			};
			
			$('button#sub').click(function(){
				var _message = $('#message').val();
				console.log(_message);
				var _tmplate = '<li class="me"><img class="head" src="images/head1.jpg" alt=""><p>'+_message+'</p></li>';
				$('ul.chat-thread').append(_tmplate);
				$('#message').val('');
				websocket.send(_message);
			});
			
			websocket.onclose = function (evt) {
				console.log("Disconnected");
			};
			
			// 当服务器有消息推送的时候 触发
			websocket.onmessage = function (evt) {
				var _tmplate = '<li class="you"><img class="head" src="images/head1.jpg" alt=""><p>'+evt.data+'</p></li>';
				$('ul.chat-thread').append(_tmplate);
				
			};
			
			
		})
        
        </script>
</body>
</html>